import { StyleSheet } from "react-native";
import { lightTheme } from "@/styles/light.style";

type ThemeColors = typeof lightTheme;

export const getStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.backgroundLight,
    },
    header: {
      backgroundColor: colors.card.background,
      paddingVertical: 16,
      paddingHorizontal: 20,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: colors.border.light,
    },
    headerTitle: {
      fontSize: 18,
      fontWeight: "bold",
      color: colors.text.primary,
    },
    settingGroup: {
      backgroundColor: colors.card.background,
      marginBottom: 10,
      borderTopWidth: StyleSheet.hairlineWidth,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderColor: colors.border.light,
    },
    sectionTitle: {
      fontSize: 14,
      color: colors.text.secondary,
      marginLeft: 20,
      marginTop: 10,
      marginBottom: 6,
    },
    buttonContainer: {
      paddingHorizontal: 20,
      marginTop: 20,
      marginBottom: 20,
    },
    deleteButton: {
      backgroundColor: colors.status.error,
      paddingVertical: 14,
      borderRadius: 8,
      alignItems: "center",
      justifyContent: "center",
      elevation: 2,
      shadowColor: colors.card.shadow,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 2,
    },
    deleteButtonText: {
      color: "#FFFFFF",
      fontSize: 16,
      fontWeight: "bold",
    },
    remarkText: {
      fontSize: 14,
      color: colors.text.secondary,
    },
  });
